window.addEventListener('load', function() {
	
	var canvas = document.getElementById('puzzle-canvas'),
		context = canvas.getContext('2d'),
		img = document.getElementById('puzzle-img');
	
	/**
	 * Debug code
	 */
	var touchEvents = [
		'touchstart', 'touchend',
		'touchmove', 'touchcancel'
	];

	var out = document.getElementById('output'),
		touchEventCounter = 0;

	document.getElementById('clear-btn').addEventListener('click', function() {
		
		while (out.hasChildNodes())
			out.removeChild(out.firstChild);
		
	});	
	
	var log = function(data)
	{
		for (var i = 0, len = data.length; i < len; i++)
		{
			var line = document.createElement('p');			
			line.innerText = data[i];
			
			out.appendChild(line);
		}
	};
	
	// Attach touch event listeners
	for (var i = 0; i < touchEvents.length; i++)
	{
		canvas.addEventListener(touchEvents[i], function(e) {
			
			log([
				'Touch no: ' + touchEventCounter++,
				'Touch type: ' + e.type
			]);
						
		});
	}	
	
	/**
	 * Puzzle code
	 */
	var puzzle = new SlidePuzzle(context, img, 8);
	
	// Everyday I'm	
	puzzle.shuffle(); // 'n
	
	puzzle.addEventListener(SlidePuzzleEvent.PIECE_MOVED, function() {
		
		log(['Piece moved']);
		
	});
	
	puzzle.addEventListener(SlidePuzzleEvent.PUZZLE_SOLVED, function() {
		
		log(['Puzzle completed!']);
		
	});
	
});